import {
  Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, ViewChild,
  ElementRef, Renderer, Inject, EventEmitter, HostListener, OnDestroy
} from '@angular/core';
import {Subject} from "rxjs/Subject";
import {DOCUMENT} from "@angular/platform-browser";
import {ToolsService} from "@shared/service/tools/tools.service";
import {SignUpService} from "@sign-up/sign-up.service";

@Component({
  selector: 'sign-up-check-num',
  templateUrl: './sign-up-check-num.component.html',
  styleUrls: ['./sign-up-check-num.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class SignUpCheckNumComponent implements OnInit, OnDestroy {

  @Input() type: string;  // type 类型：0，请求普通的验证码，1，是赛事验证码
  @Input() data: any;
  @Output() checkSuccess: EventEmitter<boolean> = new EventEmitter();
  @ViewChild('bg') bg: ElementRef;
  private _channelsId = '';
  private _checkNum = '';
  private _matchId = '';
  private height = '';
  public requesData: any = {};
  public timer = '';
  public code = '';
  public canSendCode = false;
  public ngUnsubscribe: Subject<void> = new Subject<void>();

  constructor(
    private renderer: Renderer,
    private toolsService: ToolsService,
    private signUpSer: SignUpService,
    @Inject(DOCUMENT) private document
  ) {
    this.height = this.document.documentElement.clientHeight + 'px';
  }

  @Input()
  get channelsId(): string {
    return this._channelsId;
  }

  set channelsId(val: string) {
    this._channelsId = val;
  }

  @Input()
  get checkNum(): string {
    return this._checkNum;
  }

  set checkNum(val: string) {
    this._checkNum = val;
  }

  @Input()
  get matchId(): string {
    return this._matchId;
  }

  set matchId(val: string) {
    this._matchId = val;
  }

  // 获取初始数据
  dataInit() {
    this.renderer.setElementStyle(this.bg.nativeElement, 'height', this.height);
    if (this.type === '1') {
      if (this._channelsId ) {
        this.requesData['channelsId'] = this.channelsId;
      }
      this.requesData['matchId'] = this._matchId;
    }
    this.requesData['checkNum'] = this._checkNum;
    this.signUpSer.getSmsCode(this.type, this.requesData)
      .takeUntil(this.ngUnsubscribe)
      .subscribe(res => {
        if (res.result === '0') {
          this.toolsService.showToast('请求发送验证码成功');
        } else {
          this.toolsService.showToast('发送失败,请返回填写正确的手机号');
        }
      });
  }

  @HostListener('window:resize', ['$event'])
  resize(event) {
    this.renderer.setElementStyle(this.bg.nativeElement, 'height', event.target.innerHeight + 'px');
  }

  // 发送验证码
  sendCode() {
    if (!this.canSendCode) {
      return;
    }
    this.signUpSer.getSmsCode(this.type, this.requesData)
      .takeUntil(this.ngUnsubscribe)
      .subscribe(res => {
        this.SMSCodeCountDown(60);
        this.canSendCode = false;
        if (res.result === '0') {
          this.toolsService.showToast('请求发送验证码成功');
        } else {

        }
      });
  }

  // 验证码倒计时
  SMSCodeCountDown(second: number) {
    if (second !== 0) {
      this.timer = `${second--}秒`;
      setTimeout(() => {
        this.SMSCodeCountDown(second);
      }, 1000);
    }else {
      this.canSendCode = true;
      this.timer = '重新发送';
    }
  }

  submitCode() {
    if (!this.code) {
      return;
    }
    this.toolsService.showLoading();
    this.signUpSer.validSmsCode(this.code, this._checkNum)
      .takeUntil(this.ngUnsubscribe)
      .subscribe(res => {
        this.toolsService.hideLoading();
        if (res.result === '0') {
          this.toolsService.showToast('验证完成');
          this.checkSuccess.emit(true);
        } else {
          this.toolsService.showToast('验证码错误，请重新输入');
        }
      });
  }

  cancel() {
    this.checkSuccess.emit(false);
  }

  ngOnInit() {
    this.dataInit();
    this.SMSCodeCountDown(60);
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }
}
